<template>
    <el-dialog :visible.sync="btnsStatus.addText" title="设置文字" width="50%">
        视频文字：<el-input v-model="textValue" placeholder="请输入视频文字" />
        文字时间：<el-slider
            v-model="value"
            range
            :marks="marks"
            :format-tooltip="formatTip"
        />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="btnsStatus.addText = false">取消</el-button>
                <el-button type="primary" @click="confirm"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
// import { mapState } from "vuex";
import { addText, getFirstFrame } from "@/module/useFfmpeg";
import { btnsStatus } from "../store/ui-status";
export default {
    props: ["obj"],
    data() {
        return {
            value: [0, 100],
            textValue: "hello world!",
            btnsStatus: btnsStatus,
        };
    },
    computed: {
        marks() {
            return {
                0: "0s",
                100: `${
                    this.obj.videoList[this.obj.videoSelected]?.duration || 100
                }s`,
            };
        },
    },
    methods: {
        async addTextClick(textV, timeT) {
            let fileName, selectItem, videoUrl, coverUrl, videoInfo;
            try {
                fileName = `video${this.obj.videoId++}`;
                selectItem = this.obj.videoList[this.obj.videoSelected];
                videoUrl = await addText(
                    selectItem.videoUrl,
                    selectItem.fileName,
                    textV,
                    ...timeT
                );
                const tmp = await getFirstFrame(videoUrl, fileName);
                videoInfo = tmp.videoInfo;
                coverUrl = tmp.url;
            } catch (error) {
                return;
            }
            this.obj.videoList.push({
                videoUrl,
                coverUrl,
                fileName,
                videoInfo,
            });
        },
        formatTip(val) {
            return (
                (val * this.obj.videoList[this.obj.videoSelected]?.duration) /
                    100 +
                "s"
            );
        },

        confirm() {
            if (this.obj.fontList.length === 0) return alert("请先上传字体文件");
            // emit('close')
            this.btnsStatus.addText = false;
            const tmpA = this.value.map(
                (item) =>
                    (item *
                        this.obj.videoList[this.obj.videoSelected]?.duration) /
                    100
            );
            this.addTextClick(this.textValue, tmpA);
        },
    },
};
</script>
